/**
 * Created by marchen on 2015/3/2.
 */
/*   错误检查       */
typeof Ractive === 'undefined' ? console.error('Ractive.js 文件没有正确引入!') : console.log('Ractive.js 文件已经引入.');
/*   /错误检查      */

/* 静态json数据渲染表格 */
var ractiveTable1 = new Ractive({
    el : 'container_table1',
    template : '#template_table1',
    data : {
        "table1Thead" : ['姓名','性别','年龄','身高'],
        "table1Person" : [
            ['chenning','男','23',175],
            ['mark','女','21',155],
            ['cheack','男','13',165],
            ['ming','男','3',177],
            ['dongdong','女','15',195],
            ['toack','男','17',155],
            ['rackg','男','23',175],
        ]
    }
});

/* 动态改变背景颜色 */
var ractiveSelectBgColor = new Ractive({
    el : 'container_selectBgColor',
    template : '#template_selectBgColor'
});
ractiveSelectBgColor.on({
    "changeBgColor": function(){
        document.getElementsByTagName('body')[0].style.backgroundColor = String(ractiveSelectBgColor.get('bgColor'));
    }
});

/* todo事件 */
var ractiveTodo = new Ractive({
    el : 'container_todo',
    template : '#template_todo',
    data : {
        "todoLabel" : [
            {"name" : "人好","showDel" : true},
            {"name" : "不能这么旺","showDel" : true},
            {"name" : "真的好玩吗","showDel" : true},
            {"name" : "你说的","showDel" : true},
            {"name" : "好","showDel" : true},
            {"name" : "你能不能不这样玩","showDel" : true}
        ]
    }
});

//事件绑定
ractiveTodo.on({
    delLabel : function(event) {
        var index = event.index.i;
        ractiveTodo.splice("todoLabel", index, 1);
    },
    addNewList : function(event) {
        var newListName = ractiveTodo.get('newList');
        ractiveTodo.push('todoLabel',{"name":newListName,"showDel":true});
        ractiveTodo.set('newList','');
    }
});

/* 粒子系统 */
//随机一个范围的整数
function randomInt(min, max) {
    var randomNum;
    min = parseInt(min, 10);
    max = parseInt(max, 10);
    if(isNaN(min) || isNaN(max)) {return false;}
    else {
        randomNum = min + Math.floor(Math.random() * (max - min + 1));
        return randomNum;
    }
}

//交换两个数组的位置
function swapArray(arr) {
    var temp = arr[1];
    arr[1] = arr[0];
    arr[0] = temp;
}
//粒子类
var containerWidth = 400;
var containerHeight = 400;
function Dot(left, top, color) {
    this.left = left || randomInt(0,containerWidth);
    this.top = top || randomInt(0,containerHeight);
    this.color = color || 'rgb('+randomInt(0,255)+','+randomInt(0,255)+','+randomInt(0,255)+')';
    this.age = randomInt(0,100);
    this.leftOffset = randomInt(-5,5);
    this.topOffset = randomInt(-5,5);
}

//粒子集合
var myDotSet = [];
var DIEAGE = 100;

//初始粒子个数
for(var i = 0; i < 15; i++) {
    myDotSet.push(new Dot());
}
var startRender = function() {
    //粒子出生
    myDotSet.push(new Dot());

    //粒子生命迭代,生命超出死亡
    myDotSet.forEach(function(item, index, array){
        //删除生命超出的粒子
        if(item.age > DIEAGE) {
            array.splice(index, 1);
        }

        //粒子运动
        if(item.left < 0 || item.left > containerWidth) {
            array[index].left = 0;
            array[index].leftOffset *= -1;
        }else if(item.top < 0 || item.top > containerWidth) {
            array[index].top = 0;
            array[index].topOffset *= -1;
        }
        array[index].left += item.leftOffset;
        array[index].top += item.topOffset;

        //生命迭代
        array[index].age ++;
    });
}

ractiveDot = new Ractive({
    el : "container_dot",
    template : "#template_dot",
    data : {
        "eventChange" : ["startDot","stopDot"],
        "textChange" : ["粒子开始","粒子停止"],
        "dotArray" : myDotSet
    }
});
//事件绑定
var timeHander;
ractiveDot.on({
    "startDot" : function() {
        var eventChange = ractiveDot.get('eventChange');
        var textChange = ractiveDot.get('textChange');
        swapArray(eventChange);
        swapArray(textChange);
        ractiveDot.set('eventChange',eventChange);
        ractiveDot.set('textChange',textChange);
        timeHander = setInterval(startRender,10);
    },
    "stopDot" : function() {
        var eventChange = ractiveDot.get('eventChange');
        var textChange = ractiveDot.get('textChange');
        swapArray(eventChange);
        swapArray(textChange);
        ractiveDot.set('eventChange',eventChange);
        ractiveDot.set('textChange',textChange);
        clearInterval(timeHander);
    }
});